<template>
	<section>






<!--二级列表-->
            <el-drawer
                title="所属列表"
                :append-to-body="true"
                :visible.sync="dictionaryTable"
                direction="rtl"
                size="60%">

              <!--三级编辑-->
              <el-drawer
                  size="50%"
                  :title="myTtss"
                  :append-to-body="true"
                  :show-close="false"
                  :visible.sync="innerEtailsDrawer">
                    <el-form :model="etailsForm" label-width="80px" :rules="dictionaryFormRules" ref="dictionaryForm">
                      <el-form-item label="产品名称" prop="name">
                        <el-input v-model="etailsForm.name" auto-complete="off"></el-input>
                      </el-form-item>
                      <el-form-item label="所属分类" prop="types_id">
                        <el-input v-model="etailsForm.types_id" auto-complete="off"></el-input>
                      </el-form-item>
                      <el-button  style="left: 50px" @click.native="innerEtailsDrawer = false">取消</el-button>
                      <el-button type="primary" @click.native="xxoo" :loading="dictionaryLoading">提交</el-button>
                    </el-form>
              </el-drawer>



              <!--工具条-->
              <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
                <el-form :inline="true" :model="filterss">
                  <el-form-item>
                    <el-input v-model="filterss.etailsKeyword" placeholder="关键字"></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" v-on:click="etailQueryLow">查询</el-button>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="etailshandleEdit">新增</el-button>
                  </el-form-item>
                </el-form>
              </el-col>


              <!--列表-->
              <el-table :data="etails">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column type="index" width="60">
                </el-table-column>
                <el-table-column prop="name" label="产品"  sortable>
                </el-table-column>
                <el-table-column prop="types_id" label="单位" width="80" sortable>
                </el-table-column>
                <el-table-column label="操作" width="300">
                  <template scope="scope">
                    <el-button size="small" @click="saveEtailshandleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button type="danger" size="small" @click="asssssss(scope.$index, scope.row)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>


              <!--分页工具条-->
              <el-col :span="24" class="toolbar">
                <el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
                <el-pagination layout="prev, pager, next"
                               @current-change="etailHandleCurrentChange"
                               :current-page="etailsCurrentPage"
                               :page-size="etailsPageSize"
                               :total="etailsTotal"
                               style="float:right;">
                </el-pagination>
              </el-col>


            </el-drawer>
<!--二级列表尾-->



<!--一级列表头-->
              <!--工具条-->
              <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
                <el-form :inline="true" :model="filters">
                  <el-form-item>
                    <el-input v-model="filters.keyword" placeholder="关键字"></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" v-on:click="queryLow">查询</el-button>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="handleAdd">新增</el-button>
                  </el-form-item>
                </el-form>
              </el-col>

              <!--列表-->
              <el-table :data="dictionarys" highlight-current-row v-loading="listLoading" @selection-change="selsChange"
                        @row-dblclick="etailsEdit"
                        style="width: 100%;">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column type="index" width="60">
                </el-table-column>
                <el-table-column prop="name" label="产品分类" width="200" sortable>
                </el-table-column>
                <el-table-column prop="sn" label="产品编号"  sortable>
                </el-table-column>
                <el-table-column prop="id" label="分类id"  sortable>
                </el-table-column>
                <el-table-column label="操作" width="300">
                  <template scope="scope">
                    <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <!--工具条-->
              <el-col :span="24" class="toolbar">
                <el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
                <el-pagination layout="prev, pager, next"
                               @current-change="handleCurrentChange"
                               :current-page="currentPage"
                               :page-size="pageSize"
                               :total="total"
                               style="float:right;">
                </el-pagination>
              </el-col>
              <!--新增/编辑界面-->
              <el-dialog :title="myTitle" :visible.sync="dictionaryFormVisible" :close-on-click-modal="false">
                <el-form :model="dictionaryForm" label-width="80px" :rules="dictionaryFormRules" ref="dictionaryForm">
                  <el-form-item label="字典名称" prop="name">
                    <el-input v-model="dictionaryForm.name" auto-complete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="字典编号" prop="sn">
                    <el-input v-model="dictionaryForm.sn" auto-complete="off"></el-input>
                  </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click.native="dictionaryFormVisible = false">取消</el-button>
                  <el-button type="primary" @click.native="dictionarySubmit" :loading="dictionaryLoading">提交</el-button>
                </div>
              </el-dialog>
<!--一级列表尾-->

  </section>
</template>

<script>
	import util from '../../common/js/util'
	//import NProgress from 'nprogress'
	import { getDictionaryListPage, removeDictionary, batchRemoveDictionary, dictionaryDictionary } from '../../api/api';

	export default {
		data() {
			return {
        myTtss:"",
        myTitle:"",
				filters: {
          keyword: '',
				},
        filterss: {
          etailsKeyword: ''

        },


				dictionarys: [],

        typeids:null,
        etails: [],
        etailsTotal: 0,
        etailsCurrentPage: 1,
        etailsPageSize: 5,

				total: 0,
        currentPage: 1,
        pageSize: 5,
				listLoading: false,
				sels: [],//列表选中列

        dictionaryTable: false,//抽屉开关;
        innerEtailsDrawer: false,


        dictionaryFormVisible: false,//编辑界面是否显示
				dictionaryLoading: false,
				dictionaryFormRules: {
					name: [
						{ required: true, message: '请填写,不能为空!', trigger: 'blur' }
					],
          sn: [
            { required: true, message: '请填写,不能为空!', trigger: 'blur' }
          ],
          types_id: [
            { required: true, message: '请填写,不能为空!', trigger: 'blur' }
          ]
				},

        //三级菜单表单数据:
        etailsForm:{

          name:"",
          types_id:null

        },
				//编辑界面数据
				dictionaryForm: {
					sn: '',
					name: ''

				},




			}
		},
		methods: {




//二级页面方法


      //高级查询
      etailQueryLow(){

        this.etailsCurrentPage=1;
        this.etailGetDictionarys(this.dictionaryForm);
      },
      //分页栏
      etailHandleCurrentChange(val) {
        this.etailsCurrentPage = val;
        this.getDictionarys();
      },
      //获取列表
      etailGetDictionarys(row) {
        let idkz = parseInt(row.id);
        this.typeids=idkz;
        let para = {
          etailsPageSize: this.etailsPageSize,
          etailsCurrentPage: this.etailsCurrentPage,
          typeids:idkz,
          //传入keyword关键字查询
          etailsKeyword: this.filterss.etailsKeyword
        };
        console.log(para)
        this.listLoading = true;
        this.$http.post("/detail",para)
            .then(result=>{
              this.listLoading = false;
              result = result.data;
              this.etails=result.rows;
              this.etailsTotal=result.total;

            })
            .catch(resul=>{
              this.$message({
                message: '系统繁忙!',
                type: 'error'
              });
            })
      },
      //二级新增
      saveEtailshandleEdit: function (index, row){
        this.innerEtailsDrawer = true
        this.myTtss ="新增";
        this.etailsForm = Object.assign({}, row);
      },

      //显示三级新增界面
      etailshandleEdit: function (index, row){
        this.innerEtailsDrawer = true
        this.myTtss ="新增";
        this.etailsForm = {
          name:"",
          types_id:null
        };


      },

    //获取部门信息
    getDepartments(row){
      let sid = parseInt(row.id);
      this.$http.get("/detail/typeId/"+sid)
          .then(result=>{
            this.etails = result.data;
          })

    },



    //显示次级界面
      //row, column, event
    etailsEdit: function (row, column, event) {

      this.dictionaryTable = true;

      this.getDepartments(row);

/*      this.dictionaryForm = Object.assign({}, row);
      //获取级联数据
      this.etailGetDictionarys(this.dictionaryForm)*/
    },















//一级页面方法
      //高级查询
      queryLow(){
        this.currentPage=1;
        this.getDictionarys();
      },
      //分页栏
      handleCurrentChange(currentPage) {
        this.currentPage = currentPage;
        this.getDictionarys();
      },
      //获取字典列表
      getDictionarys() {
        let para = {
          pageSize: this.pageSize,
          currentPage: this.currentPage,
          //传入keyword关键字查询
          keyword: this.filters.keyword
        };
        this.listLoading = true;
        this.$http.post("/type",para)
            .then(result=>{
              this.listLoading = false;
              result = result.data;
              this.dictionarys=result.rows;
              this.total=result.total;

            })
            .catch(resul=>{
              this.$message({
                message: '系统繁忙!',
                type: 'error'
              });
            })
      },

			//删除
			handleDel: function (index, row) {
				this.$confirm('确认删除该记录吗?', '提示', {
					type: 'warning'
				}).then(() => {
					this.listLoading = true;
					this.$http.delete("/type/"+row.id)
            .then(result=>{
              this.listLoading = false;
              result = result.data;
              if(!result.success){
                this.$message({
                  message: result.message,
                  type: 'error'
                });
              }
              //操作成功提示
              this.$message({
                message: "操作成功!",
                type: 'success'
              });
              this.currentPage = 1;
              this.getDictionarys();
            })
            .catch(result=>{
              this.$message({
                message: '系统繁忙，稍后重试！',
                type: 'error'
              });
            })
				}).catch(() => {

				});
			},
			//显示编辑界面
			handleEdit: function (index, row) {
         //获取级联数据
        this.dictionaryFormVisible = true;
        this.myTitle ="编辑";
				this.dictionaryForm = Object.assign({}, row);

				//回显父级字典框---dirPath;
        let dirPath = this.dictionaryForm.dirPath;
        if(dirPath){
          let arrayDirPath = dirPath.split("/");
          let parentDirPath = [];
          for (let i=1;i<arrayDirPath.length-1;i++){
            parentDirPath.push(parseInt(arrayDirPath[i]));
          }
          if(parentDirPath.length>=1){
            this.dictionaryForm.dictionary= parentDirPath;
          }

        }
			},
      //显示根表新增界面
			handleAdd: function () {
        this.treeDisabled=false;

        this.myTitle ="新增";
				this.dictionaryFormVisible = true;
				this.dictionaryForm = {

          sn: '',
          name: ''

				};
			},
			//新增/编辑
			dictionarySubmit: function () {
				this.$refs.dictionaryForm.validate((valid) => {
					if (valid) {
						this.$confirm('确认提交吗？', '提示', {}).then(() => {
							this.dictionaryLoading = true;
							let para = Object.assign({}, this.dictionaryForm);
              this.$http.put("/type",para)
                .then(result=>{
                  this.dictionaryLoading = false;
                  result=result.data;
                  if(result.success){
                    this.$message({
                      message: '操作成功',
                      type: 'success'
                    });
                    //关闭窗口;
                    this.dictionaryFormVisible = false;
                    //重置表单校验;
                    this.$refs['dictionaryForm'].resetFields();

                  }else {
                    this.$message({
                      message: result.message,
                      type: 'error'
                    });
                  }
                  //设置页码为1;
                  this.currentPage=1;
                  //刷新表格
                  this.getDictionarys();
                })
                .catch(result=>{
                  this.$message({
                    message: '系统错误',
                    type: 'error'
                  });
                })
						});
					}
				});
			},
			selsChange: function (sels) {
				this.sels = sels;
			},
			//批量删除
			batchRemove: function () {
        var ids = this.sels.map(item => item.id);
				this.$confirm('确认删除选中记录吗？', '提示', {
					type: 'warning'
				}).then(() => {
					this.listLoading = true;
          this.$http.patch("/type",ids)
              .then(result=>{
                this.listLoading = false;
                result = result.data;
                if(!result.success){
                  this.$message({
                    message: result.message,
                    type: 'error'
                  });
                }
                //操作成功提示
                this.$message({
                  message: "操作成功!",
                  type: 'success'
                });
                this.currentPage = 1;
                this.getDictionarys();
              })
              .catch(result=>{
                this.$message({
                  message: '系统繁忙，稍后重试！',
                  type: 'error'
                });
              })
				}).catch(() => {

				});
			}
		},



//钩子函数
		mounted() {
			this.getDictionarys();

		}
	}

</script>

<style scoped>

</style>